<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>任务清单</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.47/vue.global.js"></script>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div id="app">
        <div class="top">
            <h2>任务清单</h2>
            <input class="entry" type="text" placeholder="请输入内容  Enter确认添加" v-model.trim="dt.temp"
                @keyup.enter="addItem">
        </div>
        <div class="line"></div>
        <h3>正在进行中</h3>
        <div class="list">
            <div class="items">
                <div class="item" v-for="(item,index) in undoList" :key="item.name">
                    <input type="checkbox" v-model="item.done" class="choice">
                    <!-- 如果状态为0 显示 文本 -->
                    <span v-show="item.state==0" @dblclick="item.state=1;tempEdit=item.name">{{item.name}}</span>
                    <!-- 状态为1显示输入框 -->
                    <input type="text" v-model="tempEdit" v-show="item.state==1"
                        @keyup.esc="item.state=0;tempEdit=item.name" @keyup.enter="item.state=0;item.name=tempEdit"
                        @blur="item.state=0;item.name=tempEdit">
                    <!--  @blur="item.state==0;item.name=tempEdit" -->
                    <img @click="removeItem(index)" src="img/删除.png" alt="">
                </div>
            </div>
            <div class="line"></div>
            <div class="tltle3">
                <h3>已经完成</h3>
                <button type="text" @click="delAll">删除全部</button>
            </div>
            <div class="list">
                <div class="items">
                    <div class="item" v-for="(item,index) in doneList" :key="item.name">
                        <input type="checkbox" v-model="item.done" class="choice">
                        <!-- 如果状态为0 显示 文本 -->
                        <span v-show="item.state==0" @dblclick="item.state=1;tempEdit=item.name">{{item.name}}</span>
                        <!-- 状态为1显示输入框 -->
                        <input type="text" v-model="tempEdit" v-show="item.state==1"
                            @keyup.esc="item.state=0;tempEdit=item.name" @keyup.enter="item.state=0;item.name=tempEdit"
                            @blur="item.state=0;item.name=tempEdit">
                        <!--  @blur="item.state==0;item.name=tempEdit" -->
                        <img @click="removeItem(index)" src="img/删除.png" alt="">
                    </div>
                </div>
            </div>
            <script>
                const { reactive, computed} = Vue;
                Vue.createApp({
                    setup() {
                        let todolist = reactive([
                            { name: "学习Vue", done: false, state: 0 },
                            { name: "学习跨平台", done: true, state: 0 }
                        ])
                        let dt = reactive({
                            // 存放输入的数据
                            temp: '',
                            // 修改框的临时数据
                            tempEdit: ''
                        })
                        const addItem = () => {
                            if (dt.temp === "") {
                                return;
                            }
                            todolist.unshift({
                                name: dt.temp,
                                done: false,
                                state: 0
                            })
                            dt.temp = "";
                        }
                        const removeItem = (index) => {
                            var flag = window.confirm("你确定要删除我吗");
                            if (flag) {
                                todolist.splice(index, 1);
                            }
                        }
                        const undoList = computed(() => {
                            return todolist.filter(item => !item.done)
                        })
                        const doneList = computed(() => {
                            return todolist.filter(item => item.done)
                        })
                        const delAll=()=>{
                            for(var i=todolist.length-1;i>=0;i--){
                                if(todolist[i].done){
                                    todolist.splice(i, 1);
                                }
                            }
                        }
                        return {
                            todolist,
                            dt,
                            addItem,
                            removeItem,
                            undoList,
                            doneList,
                            delAll
                        }
                    }
                }).mount("#app")
            </script>

</body>

</html>